<script lang="ts" setup>
import { type Carousel01ComponentMeta, JumpConsultMethod, JumpType } from '@/definitions/type'
import { usePrefix } from '@/hooks/usePrefix'
import { useSwiper } from '@/hooks/useSwiper'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderCarousel01.less'

defineOptions({
  name: 'RenderCarousel01',
})
const props = defineProps<{
  render: Carousel01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { swiperCls, swiperId } = useSwiper({
  prefix,
  props,
  watchSourceForUpdate: () => props.render.config.items,
  reInitOnPlatformChange: false,
})
</script>

<template>
  <div :class="[prefix('wraper'), prefix(platform)]">
    <div :id="swiperId" class="swiper" :class="[swiperCls]">
      <div class="swiper-wrapper">
        <div v-for="item in render.config.items" :key="item.picture" class="swiper-slide" :class="[prefix('swiper-slide')]">
          <img v-if="(item.jumpType as any) === JumpType.None" :src="item.picture">
          <a v-else-if="(item.jumpType as any) !== JumpType.Consult" target="_blank" :href="item.jumpUrl">
            <img :src="item.picture">
          </a>
          <!-- 咨询(JumpType.Consult)类型处理 -->
          <!-- 具体咨询跳转处理逻辑详见`JumpConsultMethod`上方注释 -->
          <!-- item.jumpUrl是经过处理的, 格式：`[method, content].join(',')` -->
          <div v-else-if="Number(item.jumpUrl?.split(',')[0]) === JumpConsultMethod.MeiQia" :class="prefix('designer-meiqia')">
            <img :src="item.picture">
          </div>
          <a v-else-if="Number(item.jumpUrl?.split(',')[0]) === JumpConsultMethod.DianHua" :href="`tel:${item.jumpUrl?.split(',')[1]}`">
            <img :src="item.picture">
          </a>
          <a v-else target="_blank" :href="item.jumpUrl?.split(',')[1]">
            <img :src="item.picture">
          </a>
        </div>
      </div>
      <div class="swiper-pagination" />
    </div>
  </div>
</template>
